<template>
  <el-dialog
    :title="val==='detail'?'详情':'处理'"
    :visible="openVisible"
    width="37%"
    @close="closeVisible"
  >
    <!--:rules="rules"  -->
    <el-form ref="form" :model="form" label-width="100px" style="padding:0 60px">
      <el-form-item label="类型:">
        <!-- <span>{{ form.type }}</span> -->
        <span v-if="form.type==='0'">线索工单</span>
        <span v-if="form.type==='1'">商机工单</span>
        <span v-if="form.type==='2'">商户工单</span>
      </el-form-item>
      <el-form-item label="编号:">
        <span>{{ form.id }} </span>
      </el-form-item>
      <el-form-item label="创建日期:">
        <span>{{ form.createTime }} </span>
      </el-form-item>
      <el-form-item label="用户编号:">
        <span>{{ form.userId }} </span>
      </el-form-item>
      <el-form-item label="减员姓名:">
        <span>{{ form.userName }} </span>
      </el-form-item>
      <el-form-item label="详情:" style="margin-bottom:10px">
        <span>有{{ form.clueNum }}个线索，需要进行在配合</span>
      </el-form-item>
      <el-form-item v-if="val==='check'" label="请选择部门:" prop="value">
        <treeselect
          v-model="form.value"
          :options="DptList"
          :normalizer="normalizer"
          placeholder="请选择"
          style="margin-bottom:15px"
          @select="dptUserList"
        />
      </el-form-item>
      <el-form-item v-if="val==='check'" label="请选择人员:" prop="value1">
        <el-select
          v-model="userId"
          placeholder="请选择"
          style="width:100%;border-radius: 4px;
    border: 0px solid #DCDFE6;"
        >
          <el-option
            v-for="item in roleList"
            :key="item.userId"
            :label="item.userName"
            :value="item.userId"
          />
        </el-select>
      </el-form-item>
      <el-form-item v-if="val==='detail'" label="分配部门:">
        <span>{{ form.dept }} </span>
      </el-form-item>
      <el-form-item v-if="val==='detail'" label="分配人员:">
        <span>{{ form.user }}</span>
      </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button @click="closeVisible">取 消</el-button>
      <el-button type="primary" @click="editAllocation">确 定</el-button>
    </span>
  </el-dialog>
</template>

<script>

import treeselect from '@riophae/vue-treeselect'
import '@riophae/vue-treeselect/dist/vue-treeselect.css'

import { getDptListApi, getUserListApi, editAllocationUserApi } from '@/api/allocation'
export default {
  components: { treeselect },
  props: {
    // 开关
    openVisible: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      form: {
        value: ''
      },
      userId: '', // 专拍员工id
      deptId: '', // 处理id
      /*  rules: {
        value: [{ required: true, message: '请选择部门', trigger: 'blur' }],
        value1: [{ required: true, message: '请选择人员', trigger: 'blur' }]
      }, */
      val: '',
      roleList: [], // 人员数组
      DptList: [], // 获取部门列表
      normalizer(node) {
        if (node.transferDeptAndUserVOList && !node.transferDeptAndUserVOList.length) {
          delete node.transferDeptAndUserVOList
        }
        return {
          id: node.deptId, // 唯一标识
          label: node.deptName, // 标签显示
          children: node.transferDeptAndUserVOList
        }
      }
    }
  },

  methods: {
    // 确认处理
    async editAllocation() {
      // this.$refs.form.validate(async(flag) => {
      // if (!flag) return
      await editAllocationUserApi({ oldUserId: +this.form.userId, userId: +this.userId, deptId: this.deptId })
      // console.log(res)
      this.$message.success('处理成功')
      this.closeVisible() // 关闭弹窗
      // })
    },
    // 获取部门列表
    async dptUserList(node) {
      if (!node) return
      this.deptId = node.deptId
      const res = await getUserListApi(+node.deptId)
      console.log(res)
      this.roleList = res.data
    },
    // 获取部门列表
    async getDptList() {
      const res = await getDptListApi()
      // console.log(res)
      this.DptList = res.data
      // console.log(this.DptList)
    },
    // 弹窗关闭
    closeVisible() {
      this.userId = ''
      this.DptList = []
      this.roleList = []
      this.$emit('update:openVisible', false)
      this.$parent.getAllocationList()
    },
    //  判断处理和详情   当前数据回显
    dataList(val, row) {
      // 判断处理和详情
      this.val = val
      // 当前数据回显
      this.form = row
      // console.log(this.form)
      // console.log(this.val)
    }
  }
}
</script>

<style lang='scss' scoped>
// 弹窗设置
::v-deep .el-dialog {
    // 弹窗头部
  .el-dialog__header {
    background-color: #1890ff;
    .el-dialog__title {
      color: white;
    }
    .el-dialog__headerbtn .el-dialog__close {
      color: #797979;
      font-size: 20px;
    }
  }
//   尾部
  .el-dialog__footer {
      text-align: center;
      .el-button {
        border-radius: 8px;
        height: 40px;
        width: 100px;
      }
    }
}
// input去除边框
/* ::v-deep .el-input__inner{
    border: none;
} */
::v-deep .el-form-item{
    margin-bottom: 0;
    label{
    font-weight: 500;
    color: #5d5d5d;
}
}

</style>
